<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.springframework.org/schema/jdbc">
<head xmlns:th="http://www.thymeleaf.org" th:include="master::head">
    <title>账户管理配置</title>
    <style type="text/css">
        table td {
            max-width: 40px;
            word-wrap: break-word;
            word-break: break-all;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <!--<div class="col-md-4">-->
        <!--</div>-->
        <div class="col-md-12">
            <div id="toolbar" class="btn-group">
                <button id="btn_add" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                </button>
                <!--<button id="btn_edit" type="button" class="btn btn-default">-->
                <!--<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改-->
                <!--</button>-->
                <button id="btn_delete" type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                </button>
            </div>
            <table id="tb_accounts"></table>
        </div>


    </div>

    <div class="modal fade" id="accountAddModal" tabindex="-1" role="dialog"
         aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"
                            aria-hidden="true">×
                    </button>
                    <h4 class="modal-title" id="siteModalLabel">
                        添加账户
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form" id="accountForm" th:action="@{'addAccount'}" method="post">
                        <div class="form-body">

                            <div class="form-group">
                                <label class="control-label">所属域名</label>
                                <input type="text" class="form-control" name="domain"
                                       required="required"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">账户名称</label>
                                <input type="text" class="form-control" name="userName"
                                       value="13175315644" placeholder="输入用户名称"/>
                            </div>
                            <div class="form-group">
                                <label class="control-label">账户密码</label>
                                <input type="password" class="form-control" name="passWord"
                                       placeholder="输入用户密码"/>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal">
                        关闭
                    </button>
                    <button id="btnAccountSubmit" type="button" class="btn btn-primary">
                        保存
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    <div th:include="master::itemDel"></div>
</div>
<script th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        $("#btnAccountSubmit").click(function () {

            $("#accountForm").ajaxSubmit({
                success: function (data) {
                    $('#accountAddModal').modal('hide');
                    $('#tb_accounts').bootstrapTable('refresh');
                }
            });
        });

        $("#btn_add").click(function () {
            $('#accountAddModal').modal({
                keyboard: false
            });
        });
        $("#btn_delete").click(function () {
            delItem(function () {
                var selectedRows = $('#tb_accounts').bootstrapTable('getSelections');
                var selectedIds = [];
                $.each(selectedRows, function (i, item) {
                    selectedIds.push(item.id);
                });
                if (selectedIds.length == 0) return false;

                $.ajax({
                    type: "Post",
                    cache: false,
                    contentType: "application/json",
                    url: global.contextPath + "/deleteAccounts",
                    data: JSON.stringify(selectedIds),
                    dataType: 'json',
                    success: function (result) {     //回调函数，result，返回值
                        if (result == true)
                            $('#tb_accounts').bootstrapTable('refresh');
                        else
                            alert("删除失败");
                    },
                    error: function (msg) {
                        alert(JSON.stringify(msg));
                    }
                });
            });
        });

        //1.初始化Table
        var TableInit = function () {
            var oTableInit = new Object();
            //初始化Table
            oTableInit.Init = function () {
                $('#tb_accounts').bootstrapTable($.extend(global.bootstrapTableOptions, {
                    url: global.contextPath + '/queryPageAccounts',         //请求后台的URL（*）
                    method: 'get',                      //请求方式（*）
                    columns: [{
                        checkbox: true
                    }, {
                        field: 'domain',
                        title: '所属域名'
                    }, {
                        field: 'userName',
                        title: '账户名称'
                    }, {
                        field: 'passWord',
                        title: '账户密码'
                    }, {
                        field: 'available',
                        title: '是否可用',
                        formatter: function (value, row, index) {
                            if (value == 1)
                                return "可用";
                            else
                                return "不可用";
                        }
                    }
                    ]
                }));
            };
            return oTableInit;
        };
        var oTable = new TableInit();
        oTable.Init();
    });
    /*]]>*/
</script>

</body>
</html>